<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色与透明度</title>
</head>
<body>

<canvas id="canvas" width="600" height="300">
    升级你的浏览器
</canvas>

<script>
    var canvas  =   document.getElementById('canvas'),
            context =   canvas.getContext('2d');
    context.lineJoin    =   'round';
    context.lineWidth   =   30;

    context.font    =   '24px Helvetica';
    context.fillText('Clic anywhere toerase',175,200);

    context.strokeStyle =   'goldenrod';
    context.fillStyle   =   'rgba(0,0,255,0.5)';

    context.strokeRect(75,100,200,200);
    context.fillRect(325,100,200,200);

    context.canvas.onmousedown  =   function(e){
        context.clearRect(0,0,canvas.width,canvas.height);
    };
</script>

</body>
</html>